<template>
	<view class="content">
		<view class="fault">
			<view class="fault-1">
				<view class="fault-1-1">
					<view class="faultTo">113</view>
					<view style="color:#999696;font-size: 22rpx;">待维修</view>
				</view>
				<view class="fault-1-1">
					<view class="faultTo">113</view>
					<view style="color:#999696;font-size: 22rpx;">待维护</view>
				</view>
				<view style="flex: 1;margin: auto;text-align: center;padding: 10px 0;">
					<view class="faultTo">113</view>
					<view style="color:#999696;font-size: 22rpx;">带巡查</view>
				</view>
			</view>
		</view>
		<!-- 菜单模块 -->
		<view style="margin-top: 20rpx;padding:0 40rpx;">
			<view v-for="(item,index) in list" :key="index">
				<view style="display: flex;" v-if="item.show">
					<uni-icons :type="item.type" size="22" color="#4FB19D"></uni-icons>
					<view style="font-size: 26rpx;margin-left: 10rpx;font-weight: bold;">{{item.text}}</view>
				</view>
				<view style="display: flex;margin-top: 10rpx;" v-if="item.show">
					<view v-for="(tem,i) in item.children" :key="i"  v-if="tem.show" style="width: 120rpx;margin-right: 30rpx;text-align: center;">
						<view class="menu" @click="outEnterDepotClick(tem)">
							<uni-icons :type="tem.type" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">{{tem.text}}</view>
					</view>
				</view>
			</view>
			<!-- 物料出入库 -->
			<!-- <view>
				<view style="display: flex;">
					<uni-icons type="wallet-filled" size="22" color="#4FB19D"></uni-icons>
					<view style="font-size: 26rpx;margin-left: 10rpx;font-weight: bold;">物料出入库</view>
				</view>
				<view style="display: flex;margin-top: 10rpx;">
					<view style="width: 120rpx;margin-right: 30rpx;text-align: center;">
						<view class="menu" @click="outEnterDepotClick()">
							<uni-icons type="list" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">出入库列表</view>
					</view>
					<view style="width: 120rpx;text-align: center;">
						<view class="menu">
							<uni-icons type="map-filled" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">登记入库</view>
					</view>
				</view>
			</view> -->
			<!-- 区域巡查 -->
			<!-- <view>
				<view style="display: flex;">
					<uni-icons type="wallet-filled" size="22" color="#4FB19D"></uni-icons>
					<view style="font-size: 26rpx;margin-left: 10rpx;font-weight: bold;">区域巡查</view>
				</view>
				<view style="display: flex;margin-top: 10rpx;">
					<view style="width: 120rpx;margin-right: 30rpx;text-align: center;">
						<view class="menu">
							<uni-icons type="map-pin-ellipse" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">区域查看</view>
					</view>
					<view style="width: 120rpx;margin-right: 30rpx;text-align: center;">
						<view class="menu">
							<uni-icons type="calendar-filled" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">巡查计划</view>
					</view>
					<view style="width: 120rpx;text-align: center;">
						<view class="menu">
							<uni-icons type="wallet" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">巡查登记</view>
					</view>
				</view>
			</view> -->
			<!-- 维保计划 -->
			<!-- <view>
				<view style="display: flex;">
					<uni-icons type="wallet-filled" size="22" color="#4FB19D"></uni-icons>
					<view style="font-size: 26rpx;margin-left: 10rpx;font-weight: bold;">维保计划</view>
				</view>
				<view style="display: flex;margin-top: 10rpx;">
					<view style="width: 120rpx;margin-right: 30rpx;text-align: center;">
						<view class="menu">
							<uni-icons type="gear-filled" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">维保工作</view>
					</view>
					<view style="width: 120rpx;text-align: center;">
						<view class="menu">
							<uni-icons type="settings" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">维保登记</view>
					</view>
				</view>
			</view> -->
			<!-- 故障保修 -->
			<!-- <view>
				<view style="display: flex;">
					<uni-icons type="wallet-filled" size="22" color="#4FB19D"></uni-icons>
					<view style="font-size: 26rpx;margin-left: 10rpx;font-weight: bold;">故障保修</view>
				</view>
				<view style="display: flex;margin-top: 10rpx;">
					<view style="width: 120rpx;margin-right: 30rpx;text-align: center;">
						<view class="menu" @click="troubleshooting()">
							<uni-icons type="loop" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">故障列表</view>
					</view>
					<view style="width: 120rpx;margin-right: 30rpx;text-align: center;">
						<view class="menu">
							<uni-icons type="tune" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">维修记录</view>
					</view>
					<view style="width: 120rpx;text-align: center;">
						<view class="menu">
							<uni-icons type="upload-filled" size="22" color="#000"></uni-icons>
						</view>
						<view style="font-size: 22rpx;line-height: 70rpx;">维修单上报</view>
					</view>
				</view>
			</view> -->
		</view>
		<view>
			<!-- <foot action="0" @updata="updata()"></foot> -->
		</view>
	</view>
</template>

<script>
import foot from '@/components/foot.vue';
export default {
	components: {
		foot
	},
	data() {
		return {
			list:[{
				text:'物料出入库',
				type:'wallet-filled',
				show:false,
				children:[{
					text:'出入库列表',
					type:'list',
					path:'../deviceService/outEnterDepot',
					show:false,
				},{
					text:'登记入库',
					type:'map-filled',
					path:'../deviceService/registrationEntry?type=' + 'add',
					show:false,
				}]
			},{
				text:'区域巡查',
				type:'wallet-filled',
				show:false,
				children:[{
					text:'区域查看',
					type:'map-pin-ellipse',
					path:'../region/areaList',
					show:false,
				},{
					text:'巡查计划',
					type:'calendar-filled',
					path:'../myTasks/patrolList',
					show:false,
				}
				// ,{
				// 	text:'巡查登记',
				// 	type:'wallet',
				// 	path:'../region/addAreaTable?type=' + 'add',
				// 	show:false,
				// },
				]
			},{
				text:'维保计划',
				type:'wallet-filled',
				show:false,
				children:[{
					text:'维保工作',
					type:'gear-filled',
					path:'../myTasks/maintenanceList',
					show:false,
					amsText:'ams:maintenance:query',
				},{
					text:'维保登记',
					type:'settings',
					path:'../maintenance/maintenanceDetails?type=' + 'add',
					show:false,
					amsText:'ams:maintenance:add',
				}]
			},{
				text:'故障保修',
				type:'wallet-filled',
				show:false,
				children:[{
					text:'故障列表',
					type:'loop',
					path:'../myTasks/faultList',
					show:false,
					amsText:'ams:fault:list',
				},{
					text:'维修单上报',
					type:'upload-filled',
					path:'../faultService/faultDetails?type=' + 'add',
					show:false,
					amsText:'ams:fault:list',
				}]
			}]
		}
	},
	methods: {
		// 设备菜单列表
		outEnterDepotClick(e){
			if(e.path){
				uni.navigateTo({
					url:e.path,
				})
			}
		}
	},
	onLoad() {
		console.log(this.$method.getStorageTo('menuList'))
		let menuList = this.$method.getStorageTo('menuList')
		if(menuList){
			this.list.forEach(item=>{
				// item.show = false
				item.show = true
				item.children.forEach(childrenItem=>{
					// childrenItem.show = false
					childrenItem.show = true
					for(let k in menuList){
						if(k.indexOf(childrenItem.amsText) != -1){
							console.log(k)
							childrenItem.show = true
							item.show = true
							return
						}
					}
					
				})
			})
			console.log(this.list)
		}
	}
}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #fff;
		overflow-y: scroll;
	}
	.content{
		font-size: 14px;
		line-height: 24px;
		height: calc(100% - (100rpx + env(safe-area-inset-bottom) / 2));
		overflow-y: scroll;
		background-color: #fff;
		.fault{
			width: 100%;height: 260rpx;background-image: linear-gradient(to top, #8BE8D6 0%, #9AC5E5 60%,#8BE8D6 100%);
			border-radius: 0 0 50rpx 50rpx;
			.fault-1{
				position: relative;width: 680rpx;height: 180rpx;background-color:#F4FDFB;margin: auto;border-radius: 20rpx;top: 40rpx;
				display: flex;
				.fault-1-1{
					flex: 1;border-right: 2px #8BE8D6 solid;margin: auto;text-align: center;padding: 10px 0;
				}
			}
		}
		.faultTo{
			color:#EE457A;font-size: 42rpx;font-weight: bold;margin-bottom: 20rpx;
		}
		.menu{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50rpx;
			background-color:#fff;
			margin: auto;
			display: flex; 
			align-items: center; 
			justify-content: center;
			box-shadow: 0 3px 12px 1px #abf3ed;
		}
	}
	
</style>